<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群星网约车 - 群星排行榜</title>
    <link rel="icon" href="../image/carMR.png" type="image/png">
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        .header select {
            font-size: 16px;
            padding: 5px 10px;
        }
        .rankings {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .ranking-table {
            width: 30%;
        }
        .ranking-table h2 {
            text-align: center;
            margin-bottom: 10px;
        }
        .el-table__header-wrapper {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
            <h1>群星排行榜</h1>
            <el-select v-model="timeRange" placeholder="选择时间范围">
                <el-option label="今天" value="today"></el-option>
                <el-option label="本月" value="month"></el-option>
                <el-option label="今年" value="year"></el-option>
            </el-select>
        </div>
        <div class="rankings">
            <div class="ranking-table">
                <h2>评分排行</h2>
                <el-table :data="ratingRanking">
                    <el-table-column prop="name" label="司机"></el-table-column>
                    <el-table-column prop="score" label="评分(总分：5分)"></el-table-column>
                </el-table>
            </div>
            <div class="ranking-table">
                <h2>接单数排行</h2>
                <el-table :data="ordersRanking">
                    <el-table-column prop="name" label="司机"></el-table-column>
                    <el-table-column prop="orders" label="接单数"></el-table-column>
                </el-table>
            </div>
            <div class="ranking-table">
                <h2>营业额排行</h2>
                <el-table :data="revenueRanking">
                    <el-table-column prop="name" label="司机"></el-table-column>
                    <el-table-column prop="revenue" label="营业额"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    axios.interceptors.request.use(
        config => {
            let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
            if (token) {
                config.headers['token'] = token;
            }
            return config;
        },
        error => {
            console.log(error);
            return Promise.reject(error);
        }
    );
    new Vue({
        el: '#app',
        data() {
            return {
                timeRange: 'today',
                ratingRanking: [],
                ordersRanking: [],
                revenueRanking: [],
                driverNames: {}
            }
        },
        mounted() {
            this.fetchRankings();
        },
        watch: {
            timeRange() {
                this.fetchRankings();
            }
        },
        methods: {
            fetchRankings() {
                axios.get(`/order/orders/rankings?timeRange=${this.timeRange}`)
                    .then(response => {
                        const data = response.data;
                        this.ratingRanking = data.find(item => item.type === 'rating').ranking.map(item => {
                            return { driverId: item.driverId, score: item.averageRating, name: '' };
                        });
                        this.ordersRanking = data.find(item => item.type === 'orders').ranking.map(item => {
                            return { driverId: item.driverId, orders: item.orderCount, name: '' };
                        });
                        this.revenueRanking = data.find(item => item.type === 'revenue').ranking.map(item => {
                            return { driverId: item.driverId, revenue: item.totalRevenue, name: '' };
                        });
                        this.loadDriverNames();
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            loadDriverNames() {
                const driverIds = [
                    ...new Set([
                        ...this.ratingRanking.map(item => item.driverId),
                        ...this.ordersRanking.map(item => item.driverId),
                        ...this.revenueRanking.map(item => item.driverId)
                    ])
                ];
                driverIds.forEach(driverId => {
                    this.getDriverName(driverId);
                });
            },
            getDriverName(driverId) {
                axios.get('/driver/drivers/getById?driverId=' + driverId)
                    .then(response => {
                        if (response.data.code === 1) {
                            this.$set(this.driverNames, driverId, response.data.data.username);
                            this.updateDriverNames();
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            updateDriverNames() {
                this.ratingRanking.forEach(item => {
                    item.name = this.driverNames[item.driverId] || '未知司机';
                });
                this.ordersRanking.forEach(item => {
                    item.name = this.driverNames[item.driverId] || '未知司机';
                });
                this.revenueRanking.forEach(item => {
                    item.name = this.driverNames[item.driverId] || '未知司机';
                });
            }
        }
    });
</script>
</body>
</html>
